<template>
  <div>
  <el-form ref="form" :model="form" class="button-container" label-width="150px">
    <el-form-item label="选择文件">
      <el-select v-model="selectedFile" placeholder="请选择" class="width300">
        <el-option
          v-for="file in fileList"
          :key="file"
          :label="file"
          :value="file"
          >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="文件详情">
      <div id="viewport-HTML-element1" class="infoDiv"></div>
    </el-form-item>
    <!-- 区域用于显示病人原始图像信息 -->
    <!-- 点击按钮后才会显示病人原始图像信息 -->
      <el-form-item label="病人原始图像信息">
        <div class="patient-info" v-if="showPatientInfo">
          <p>尺寸：{{ patientInfo.size }}</p>
          <p>Spacing：{{ patientInfo.spacing }}</p>
          <p>直径：{{ patientInfo.diameter }}                    面积：{{ patientInfo.area }}</p>
          <p>体积：{{ patientInfo.volume }}</p>
        </div>
        <el-button @click="showPatientInfo = !showPatientInfo">
          {{ showPatientInfo ? '隐藏病人信息' : '显示病人信息' }}
        </el-button>
      </el-form-item>

  </el-form>



  </div>
</template>

<script>
import axios from "axios";
import '../../static/bundle.js'

export default {
  name: "Image3DShow",
  data() {
    return {
      fileList: [],
      selectedFile: null,
      patientInfo: {}, // 用于存储病人原始图像信息
            showPatientInfo: false, // 控制是否显示病人信息

    };
  },
  mounted() {
    this.fetchFileList();
  },
  watch: {
    selectedFile: {
      handler(newV) {
        this.selectFile(newV);
      }
    }
  },
  methods: {
    fetchFileList() {
      axios.get('/load_upload_file')
      .then(response => {
        this.fileList = response.data;
      })
      .catch(error => {
        alert('获取文件列表失败:', error);
      });
      // this.fileList = ['111111f11111fdsfdsfasdfsadfsdafdsf111.dd', '1111111d1111fdsfdsfasdfsadfsdafdsf111.dd', '111111s11111fdsfdsfasdfsadfsdafdsf111.dd', '1111111v1111fdsfdsfasdfsadfsdafdsf111.dd', '111111111x11fdsfdsfasdfsadfsdafdsf111.dd', '1111111a1111fdsfdsfasdfsadfsdafdsf111.dd'];
    },
    selectFile(file) {
      this.selectedFile = file; // 记录当前选中的文件
      document.getElementById("viewport-HTML-element1").innerHTML = "";
      const filePath = '/static/upload/' + file;

      // 请求获取病人原始图像信息
      axios.get('/get_patient_info', {
        params: {
          filename: file, // 传递选中的文件名
        },
      })
      .then(response => {
        this.patientInfo = response.data;
      })
      .catch(error => {
        console.error('获取病人原始图像信息失败:', error);
      });

      setTimeout(() => {
        window.run1('viewport-HTML-element1', filePath);
      }, 600);
    },
  },
};
</script>

<style scoped lang="less">
.button-container {
  margin-top: 20px;
  justify-content: left;
  display: block;
}

.file-button {
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
  width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  border-radius: 6px;
}

.file-button.active {
  background-color: #f0f0f0; /* 添加或修改合适的颜色值 */
}
.width300{
  width: 300px;
}
.infoDiv{
  margin-top: 20px;
}

.patient-info {
  margin-top: 20px;
  display: inline-block; // 使信息在同一行内显示
}
</style>
